<template>
	<view class="content">
		<view class="mokuan-back">
			<view class="mokuan">
				<view class="zonge">
					总金额(元)
				</view>
				<view class="price"><text style="font-size: 24rpx;">￥</text><text>{{info.usable}}</text></view>
				<view class="tixian">
					<!-- 每月15号自动提现 -->
				</view>
				<view class="uni-row" style="margin-top: 40rpx;">
					<view class="shouyi-iten">
						<view>昨日收益</view>
						<view  style="font-weight: bold;color: #333333;">￥{{info.yesterday}}</view>
					</view>
					<view class="shouyi-iten">
						<view>累计收益</view>
						<view style="font-weight: bold;color: #38D180;">￥{{info.totals}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<button class="tixian-btn" @tap="gogetmoney()">申请提现</button>
		<view class="jilu-container">
			<view class="uni-row tab-bar border-bottom">
				<view :class="{'tab-active':index==flag}" v-for="(item,index) in tars" :key="index" @tap="changetab(index)">{{item}}</view>
			</view>
			<view class="fanyong-list1" v-if="iskehu">
				<view class="uni-row fy-item border-bottom" v-for="(item,index) in list" :key="index" >
					<view class="fy-icon">
						<image :src="item.headurl"></image>
					</view>
					<view class="fy-info">
						<view class="fy-username">
							{{item.nickname}}
							<text class="jine">返佣{{item.rebate}}</text>
						</view>
						<view class="time-info">
							<text style="margin-right: 16rpx;">{{item.create_time}}</text>
							<text>消费{{item.totals}}</text>
							<text style="float: right;" v-if="item.status==1">已返</text>
							<text style="float: right;" v-if="item.status==0">未返</text>
						</view>
					</view>
				</view>
			</view>
			<view class="fanyong-list" v-if="isfanyong">
				<view class="uni-row fy-item border-bottom" v-for="(item,index) in list" :key="index" @tap="goinfo" :data-id="item.order_id">
					<view class="fy-icon" style="border-radius: 0px;">
						<image :src='item.list[0].img' style="border-radius: 0px;"></image>
					</view>
					<view class="fy-info ">
						<view class="fy-username">
							<text class="fy-name">{{item.list[0].name}}</text>
							<text class="jine">返佣{{item.rebate}}</text>
						</view>
						<view class="time-info">
							<text style="margin-right: 16rpx;">{{item.create_time}}</text>
							<text>消费{{item.totals}}</text>
							<text style="float: right;" v-if="item.status==1" >已返</text>
							<text style="float: right;" v-if="item.status==0" >未返</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import {getlogin} from "@/static/js/login.js";
	import {isshangjia} from "@/static/js/login.js";
	export default {
			data() {
				return {
					flag:0,//tab-bar的下标
					isfanyong:true,
					iskehu:false,
					tars:["返佣记录","我的客户"],
					userinfo:{},
					wxinfo_id:"",
					list:[],
					info:{},
					
				}
			},
			onLoad() {
	            this.userinfo = getlogin()
				 this.wxinfo_id=this.userinfo.wxinfo_id;
				 this.getdata()
				 this.getdatatop()
			},
			methods: {
				/**
				 * 前往详情页面
				 */
				goinfo(e){
					uni.navigateTo({
						url:"recordinfo?order_id="+e.currentTarget.dataset.id
					})
				},
				/**
				 * 获取上面的金额
				 */
				getdatatop(){
					uni.request({
					    url: httpPath.filePath+"/index/brokerage/index", //短信验证码。
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data: {wxinfo_id:this.wxinfo_id},
					    success: (res) => {
					        if(res.data.code && res.data.code==200){ 
								this.info=res.data.data;
							}
					    }
					}); 
				},/**
				 * 获取上面的金额
				 */
				gogetmoney(){
					if(this.info.usable==0){
						uni.showModal({
							showCancel:false,
							content:"总金额为0，不能提现"
						})
						return false;
					}
					uni.request({
					    url: httpPath.filePath+"/index/brokerage/apply", //短信验证码。
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data: {wxinfo_id:this.wxinfo_id,cash:this.info.usable},
					    success: (res) => {
					        if(res.data.code && res.data.code==200){ 
								uni.showModal({
									showCancel:false,
									content:res.data.msg
								})
							}else if(res.data.code==401){
                                uni.showModal({
                                	
                                	content:"您还没有添加银行卡信息，是否前去添加",
                                    success: function (res) {
                                    	if (res.confirm) {
                                    		uni.navigateTo({
                                    			url:"/pages/user/bank"
                                    		})
                                    	}
                                    }
                                })
                                
                            }else{
								uni.showModal({
									showCancel:false,
									content:res.data.msg
								})
							}
					    }
					}); 
				},getdata(){
					let url = "";
					if(this.flag==0){
						url="/index/brokerage/record"
					}else{
						url="/index/brokerage/client"
					}
					uni.request({
					    url: httpPath.filePath+url, //短信验证码。
					    method:'POST',
					    header:{'content-type':'application/x-www-form-urlencoded'},
					    data: {wxinfo_id:this.wxinfo_id},
					    success: (res) => {
					        if(res.data.code && res.data.code==200){ 
								this.list = res.data.data;
								console.log(this.list)
							}
					    }
					}); 
				},
				changetab(index){
					this.flag=index;
					if(index==0){
						this.isfanyong=true;
						this.iskehu=false;
					}else{
						this.iskehu=true;
						this.isfanyong=false;
					}
					this.getdata();
				}
			}
		}
</script>

<style>
	page{background:#e6eaf6;}
	.mokuan-back{
	   padding-top: 20rpx;
	   background: -moz-linear-gradient(top, #333 0%, #e6eaf6 100%);
	   background: -webkit-linear-gradient(top, #333 0%,#e6eaf6 100%);
	   background: -o-linear-gradient(top, #333 0%,#e6eaf6 100%);
	   background: -ms-linear-gradient(top, #333 0%,#e6eaf6 100%);
	   background: linear-gradient(to bottom, #333 0%,#e6eaf6 100%);
		   
		
	}
	.mokuan{width: 686rpx;margin: auto;background: #FFFFFF;border-radius: 5px;height: 408rpx;padding-top: 47rpx;}
	.zonge{
		text-align: center;
		font-size:28rpx;
	    margin: 0rpx 0px 20rpx;
		font-weight:400;
		color:rgba(102,102,102,1);
	
	}
	.price{
		text-align: center;
		
		font-size:34rpx;
		
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:42rpx;
		margin-bottom: 20rpx;
	
	}
	.tixian{
		text-align: center;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:42rpx;
		}
    .shouyi-iten{width: 50%;}
	.shouyi-iten view{text-align: center;font-size: 28rpx;color: #999999;line-height: 60rpx;}
	.tixian-btn{font-size: 28rpx;text-align: center;height:75rpx ;width:359rpx ;margin: auto;margin-top: -36rpx;font-weight: bold;background: #333;color: #fff;}
	.tab-bar{width: 100%;}
	.tab-bar view{height: 101rpx;width: 50%;line-height: 101rpx;font-size: 32rpx;color: #999999;text-align: center;font-weight: bold;}
	.jilu-container{background: #FFFFFF;margin-top: 40rpx;}
	.tab-active{color: #333333!important;}
	.fanyong-list{padding: 0rpx 32rpx;}
	.fanyong-list1{padding: 0rpx 32rpx;}
	.fy-item{padding: 18rpx 0px;}
	.fy-icon{width:80rpx ;height:80rpx ;border-radius: 50%;margin-right: 24rpx;}
	.fy-icon image{width: 80rpx;height:80rpx ;border-radius: 50%;}
	.fy-info{width: 582rpx;}
	.fy-username{font-size:28rpx;line-height:42rpx;font-weight: bold;}
	.fy-username .jine{color: #38D180;float: right;}
	.time-info{font-size:24rpx;color: #999999;margin-top: 10rpx;}
	.fy-name{width: 400rpx;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	</style>
